<template>
	<u-popup :show="showPopup" closeOnClickOverlay overlay round='10' closeable @close="showPopup=false" mode="bottom">
		<view style="margin: 0rpx;padding:1rpx" @touchmove.stop.prevent="() => {}">
			<view
				style="text-align: center;padding: 20rpx;font-weight: bold;display:flex;justify-content: center;position:relative">
				<view>
					签到
				</view>
			</view>

			<u-tabs :list="tabs" :current="currentSwiperItem" @click="item=>currentSwiperItem=item.index"></u-tabs>
			<swiper @touchmove.stop.prevent="() => {}" style="height: 1340rpx;" :current="currentSwiperItem"
				disable-touch="true" circular :indicator-dots="false" :autoplay="false" easing-function="easeInCubic"
				:duration="300">
				<swiper-item style="padding: 0;">
					<!-- 空提示 -->
					<view v-if="doneEnrolls.length == 0"
						style="color: #777;padding: 20px;text-align: center;background-color: #fbfbfb;">
						没有成员
					</view>
					 
					 <view  v-else style="padding-bottom: 50rpx;">
						 <!-- 滚动视窗 -->
						 <scroll-view scroll-y style="height: 1200rpx;">
							<view style="margin:15px 10px;">
								<view @click="selectAll(doneEnrolls,doneSelecteds)"
									style="left:0;padding:5px 20px;border:solid 1rpx #eeeeee;border-radius: 4px;display: inline">
									全选
								</view>
							</view>
							
							<!-- 兼职卡片 -->
								<view v-for="(enroll,index) in doneEnrolls"  @click="select(doneSelecteds,enroll)" style="box-shadow: 0px 0px 10px 0px #66666645;border-radius:10rpx;display: flex;flex-direction:column;margin:15rpx;">
									<view style="flex: 1;display: flex;justify-content: space-between;padding: 20rpx;">
										<view style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
											<u-avatar :src="absUrl(enroll.enroller.head_icon_url)" size="40" fontSize="34"></u-avatar>
											<view style="margin-left: 20rpx;">
												<view
													style="display: flex;flex-direction: column;font-size: 14px;justify-content: space-between;color: #363636;">
													<view
														style="display: flex;flex-direction: column;;align-items: center;padding: 0rpx 0;">
														<view style="margin: 2px;color: #888;">26岁</view>
														<view style="font-weight: bold;font-size: 16px;">{{enroll.enroller.name}}
														</view>
														<view>男</view>
													</view>
											</view>
											</view>
											<view style="margin-left: 20rpx;border-right: solid 1px #eee;height: 100%;"></view>
											<view
												style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
												<view style="color: #888;">
													{{enroll.enroller.id_number}}
												</view>
												<view
													style="font-weight: bold;font-size: 18px;padding: 20rpx 0;display: flex;align-items: center;">
													<view style="font-weight: bold;font-size: 16px;">{{enroll.enroller.phone_number}}
													</view>
												</view>
											</view>
										</view>
									
										<view style="display:flex;align-items:center">
											<!-- 选择按钮 -->
											<view  style="position: relative;border-radius: 100px;width: 40rpx;height: 40rpx;align-self: center;box-shadow: 0px 0px 6px 0px #66666665;" 
												:style="{
													border: isSelected(doneSelecteds,enroll)?'none' : 'solid 1rpx #eee',
													backgroundColor: isSelected(doneSelecteds,enroll) ? 'blueviolet' : 'transparent'
												}"
											>
												
												<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
													<u-icon name="checkmark" color="white"></u-icon>
												</view>
											</view>
										</view> 
					<!-- 					<view @click="()=>state(enroll).click?state(enroll).click(enroll):null" style="display: flex;align-items: center;justify-content: center;">
											<view style="display: flex;align-items: center;border-radius: 10rpx;"
												:class="state(enroll).cls"
											>
												<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
												<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
											</view>
										</view>	 -->
									</view>
									<view style="flex: 1;border-top: solid 1rpx #eee;padding: 20rpx;display: flex;align-items: center;">
										<view style="margin: 2px;display: flex;padding: 0 30rpx;">
											<text style="padding-right: 10rpx;font-size: 16px;">已经签离</text>
										</view>
										<view style="flex: 1;display: flex;justify-content: center;color: #888;font-size: 13px;">
											签离时间: {{$dayjs(enroll.sign_down_at).format('YYYY-MM-DD HH:mm:ss')}}
										</view>
									</view>
								</view>
						</scroll-view>
					</view>
						
					<view style="
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								display: flex;
								">
						<button :disabled="doneSelecteds.length == 0" @click="showReadyModal=true" class="cu-btn block lg"
							style="
							  flex: 1;
								background-color: blueviolet;
								color: white;
								font-weight: bold;
								margin: 20rpx;
							">
							取消签离
						</button>
					</view>
					
					<u-modal :show="showReadyModal" :showCancelButton="true" title="操作确认" content='是否取消签到'
						@confirm="showReadyModal=false,commit(doneSelecteds,true)" @cancel="showReadyModal=false"></u-modal>
				</swiper-item>
				
				<swiper-item style="padding: 0;">
					<view style="padding-bottom: 50rpx;">
						<!-- 滚动视窗 -->
						<scroll-view scroll-y style="height: 1200rpx;">
							<view style="margin:15px 10px;">
								<view @click="selectAll(readyEnrolls,readySelecteds)"
									style="left:0;padding:5px 20px;border:solid 1rpx #eeeeee;border-radius: 4px;display: inline">
									全选
								</view>
							</view>
							
						<!-- 兼职卡片 -->
							<view v-for="(enroll,index) in readyEnrolls" @click="select(readySelecteds,enroll)" style="box-shadow: 0px 0px 10px 0px #66666645;border-radius:10rpx;display: flex;flex-direction:column;margin:15rpx;">
								<view style="flex: 1;display: flex;justify-content: space-between;padding: 20rpx;">
									<view style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
										<u-avatar :src="absUrl(enroll.enroller.head_icon_url)" size="40" fontSize="34"></u-avatar>
										<view style="margin-left: 20rpx;">
											<view
												style="display: flex;flex-direction: column;font-size: 14px;justify-content: space-between;color: #363636;">
												<view
													style="display: flex;flex-direction: column;;align-items: center;padding: 0rpx 0;">
													<view style="margin: 2px;color: #888;">26岁</view>
													<view style="font-weight: bold;font-size: 16px;">{{enroll.enroller.name}}
													</view>
													<view>男</view>
												</view>
										</view>
										</view>
										<view style="margin-left: 20rpx;border-right: solid 1px #eee;height: 100%;"></view>
										<view
											style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
											<view style="color: #888;">
												{{enroll.enroller.id_number}}
											</view>
											<view
												style="font-weight: bold;font-size: 18px;padding: 20rpx 0;display: flex;align-items: center;">
												<view style="font-weight: bold;font-size: 16px;">{{enroll.enroller.phone_number}}
												</view>
											</view>
										</view>
									</view>
								
									<view style="display:flex;align-items:center">
										<!-- 选择按钮 -->
										<view  style="position: relative;border-radius: 100px;width: 40rpx;height: 40rpx;align-self: center;box-shadow: 0px 0px 6px 0px #66666665;" 
											:style="{
												border: isSelected(readySelecteds,enroll)?'none' : 'solid 1rpx #eee',
												backgroundColor: isSelected(readySelecteds,enroll) ? 'blueviolet' : 'transparent'
											}"
										>
											
											<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
												<u-icon name="checkmark" color="white"></u-icon>
											</view>
										</view>
									</view> 
				<!-- 					<view @click="()=>state(enroll).click?state(enroll).click(enroll):null" style="display: flex;align-items: center;justify-content: center;">
										<view style="display: flex;align-items: center;border-radius: 10rpx;"
											:class="state(enroll).cls"
										>
											<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
											<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
										</view>
									</view>	 -->
								</view>
								<view style="flex: 1;border-top: solid 1rpx #eee;padding: 20rpx;display: flex;align-items: center;">
									<view style="margin: 2px;display: flex;padding: 0 30rpx;">
										<text style="padding-right: 10rpx;font-size: 16px;">待签离</text>
									</view>
									<view style="flex: 1;display: flex;justify-content: center;color: #888;font-size: 13px;">
										签到时间: {{$dayjs(enroll.sign_up_at).format('YYYY-MM-DD HH:mm:ss')}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<view style="
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								display: flex;
								">
						<button :disabled="readySelecteds.length == 0" @click="showVerifyModal=true" class="cu-btn block lg"
							style="
							  flex: 1;
								background-color: blueviolet;
								color: white;
								font-weight: bold;
								margin: 20rpx;
							">
							批量签离
						</button>
					</view>

					<u-modal :show="showVerifyModal" :showCancelButton="true" title="操作确认" content='是否确认签到'
						@confirm="showVerifyModal=false,commit(readySelecteds)" @cancel="showVerifyModal=false"></u-modal>
				</swiper-item>
			</swiper>
		</view>
	</u-popup>
</template>

<script>
	import memberManager from './member-manager.js'

	export default {
		mixins: [memberManager],
		inject:['task'],
		data() {
			return {
				showVerifyModal: false,
				showReadyModal:false,
				showPopup: false,
				currentSwiperItem: 0,
				tabs: [{
					name: '已签离',
				}, {
					name: '待签离',
				}, ]
			}
		},
		// watch:{
		// 	enrolls(value){
		// 		console.log(this.enrolls)
		// 		this.task.enrolls = this.enrolls
		// 		console.log(this.task.enrolls)
		// 	}
		// },
		// async mounted(){
		// 	let res = await this.$http.post('/manager/job/enrolls/seed_user')
		// 	this.task.enrolls = res.data
		// },
		computed: {
			readyEnrolls() { 
				return this.enrollsForReady(this.task.enrolls,3)
			},
			doneEnrolls() {  
				return this.enrollsForDone(this.task.enrolls,4).reverse() 
			}
		},
		methods: {
			async commit(selecteds,isCancel=false) {
 
				uni.showLoading({
					title: '正在处理'
				})

				let res = await this.$http.post('/manager/job/enrolls/assign', {
					enroll_ids: selecteds,
					type:'signdown',
					op: isCancel?'cancel':null
				})
				
				this.updateEnrolls(res.data)
				
				uni.showToast({
					title: '处理成功'
				})

				setTimeout(() => {
					this.currentSwiperItem = 0
					selecteds.splice(0,selecteds.length)
				}, 500)
			},
			async show() {
				//let res = await this.$http.post('/manager/job/enrolls/seed_user')
				//this.task.enrolls = res.data
				this.showPopup = true
				this.currentSwiperItem = 0
				this.readySelecteds = []
				this.doneSelecteds = []
			}
		}
	}
</script>

<style scoped>
	/deep/ .uni-scroll-view {
		/* 在真正的滚动区域设置 阻断滚动穿透 */
		overscroll-behavior-y: contain !important;
	}
</style>